<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>低功耗结构位姿柔性光测系统</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #ffffff 0%, #8e8e8eb8 100%);
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        .main-content {
            min-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem 0;
            margin-top: -50px;
            padding-top: calc(2rem + 50px);
            opacity: 0;
            transition: opacity 0.8s ease-in;
        }
        .main-content.show {
            opacity: 1;
        }
        .btn-container {
            margin-top: 2rem;
        }
        .btn-container .btn {
            margin: 0 1rem;
            padding: 15px 30px;
            font-size: 1.5rem;
            font-weight: 500;
            border-radius: 25px;
        }
        .btn-container .btn-primary {
            background: linear-gradient(90deg, #2196F3, #00BCD4);
            border: none;
        }
        .btn-container .btn-secondary {
            background: linear-gradient(90deg, #757575, #9E9E9E);
            border: none;
        }
        .nav-link {
            font-size: 1.2rem;
            padding: 0.5rem 1rem !important;
        }
        .nav-item {
            border-right: 2px solid #dee2e6;
            border-left: 2px solid #dee2e6;
            transition: background-color 0.3s ease;
        }
        .nav-item:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
        .nav-item:last-child {
            border-left: none;
        }
        .btn-container .btn {
            margin: 0 1rem;
            padding: 15px 30px;
            font-size: 1.5rem;
            font-weight: 500;
            border-radius: 25px;
            transition: filter 0.3s ease;
        }
        .btn-container .btn:hover {
            filter: brightness(0.6);
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="../static/images/logo.png" alt="Logo" style="height: 40px; width: auto;" class="d-inline-block align-text-top">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/product">产品介绍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/team">成员介绍</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="main-content">
        <h1 class="text-center">低功耗结构位姿柔性光测系统</h1>
        <div class="btn-container">
            <a href="/plot" class="btn btn-primary">绘制图像</a>
            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#instructionModal">使用说明</button>
        </div>
    </div>

    <div class="modal fade" id="instructionModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">使用说明</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    1. app+文档为应用于外部测量设备给出的.csv文档，进一步每20<br>&nbsp;&nbsp;&nbsp;&nbsp;秒生成一幅新的图表<br>
                    2. app文档为测试，有指定数据；<br>
                    3.&nbsp;对.csv文档格式要求：CSV 文件必须包含 x，deflections_point<br>&nbsp;&nbsp;&nbsp;&nbsp;和 deflections_dist 三列，且列名必须一致；<br>
	                &nbsp;&nbsp;&nbsp;&nbsp;eg.&nbsp;x,deflections_point,deflections_dist<br>
		            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0,0.001,0.0005<br>
		            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.3,0.002,0.0015<br>
		            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.6,0.003,0.0025<br>
		            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br>
		            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30.0,0.005,0.004<br>
                    4.&nbsp;使用时：在终端运行对应的python后端程序，待服务器构建完<br>&nbsp;&nbsp;&nbsp;&nbsp;成后在浏览器内输入：http://127.0.0.1:8080；<br>
                    5.&nbsp;若无法打开，在控制面板-程序-启用或关闭Windows功能-打开<br>&nbsp;&nbsp;&nbsp;&nbsp;所有Internet Information Service相关功能（能缩进的都点开<br>&nbsp;&nbsp;&nbsp;&nbsp;并开启）<br>
                </div>
            </div>
        </div>
    </div>

    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                document.querySelector('.main-content').classList.add('show');
            }, 100);
        });
    </script>
</body>
</html>